<template>
    <view class="select_sex_input_cp">
        <u-input 
            v-model="sex" 
            type="select" 
            @click="show = true"
            placeholder="请选择性别"/>
        <u-action-sheet 
            :list="actionSheetList" 
            v-model="show" 
            @click="onClick">
        </u-action-sheet>
    </view>
</template>

<script>
//性别选择input组件
export default {
    name:"SelectSexInputCp",
    props:{
        value:{
            type:String,
            default:'',
        },
    },
    data() {
        return {
            show: false,
            actionSheetList: [
                {
                    text: '男',
                },
                {
                    text: '女',
                },
                {
                    text: '保密',
                },
            ],
        }
    },
    computed:{
        sex:{ //性别
            get(){
                return this.value;
            },
            set(value){
                this.$emit('input',value);
            },
        },
    },
    methods:{
        onClick(index) { //确定按钮点击事件
            this.sex = this.actionSheetList[index].text;
        }
    },
}
</script>

<style lang="scss" scoped>
.select_sex_input_cp {
    text-align: center;
    width: 100%;
    /deep/.u-input{
        width: 100%;
    }
}
</style>
